@import 'styles/settings';
@import 'styles/typography-extends';

$xAxisContainerWidth: 330px;


.headerContainer {
  display: flex;
  margin-bottom: 70px;
}

.chartTitle {
  @extend %headline;
  color: $alto;
  margin-right: 1rem;
}

.filtersContainer {
  display: inline-block;
}

.xAxisIndicator,
.yAxisIndicator {
  @extend %bodyText;
  color: $alto;
}

.xAxisContainer {
  width: 330px;
}

.xAxisLabelContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  left: calc((#{$country-scene-chart-width}/2) - (#{$xAxisContainerWidth}/2));
  position: relative;
}

.yAxisContainer {
  color: $alto;
  width: 330px;
  transform-origin: left;
  transform: rotate(-90deg);
  position: relative;
  bottom: 210px;
  left: -30px;
}
